<template>
  <div class="file-message">
    <div class="file-content" @click="handleDownloadFile">
      <i class="el-icon-document document-icon"></i>
      <div class="file-info">
        <p class="file-name" :title="message.fileName">{{ message.fileName || "未知文件" }}</p>
        <p class="file-size">{{ formatFileSize(message.fileSize) }}</p>
      </div>
      <i class="el-icon-download el-icon--right" :class="downloadIconClass"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FileMessage',
  props: {
    message: {
      type: Object,
      required: true
    }
  },
  computed: {
    downloadIconClass() {
      return this.message.isMyselfMsg ? 'download-icon-green' : 'download-icon-blue';
    }
  },
  methods: {
    // 格式化文件大小
    formatFileSize(bytes) {
      if (!bytes) return '0 B';
      const k = 1024;
      const sizes = ['B', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    },
    
    // 下载文件
    handleDownloadFile() {
      this.$emit('download-file', this.message.fileUrl, this.message.fileName);
    }
  }
}
</script>

<style scoped>
.file-message {
  display: inline-block;
  max-width: 300px;
}

.file-content {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.file-content:hover {
  background: #e9ecef;
  border-color: #dee2e6;
}

.document-icon {
  font-size: 24px;
  color: #6c757d;
  margin-right: 12px;
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 14px;
  color: #333;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-size {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.download-icon-green {
  color: #67c23a;
  font-size: 16px;
}

.download-icon-blue {
  color: #409eff;
  font-size: 16px;
}
</style>